<template>
	<view class="newbie">
		<view class="tabbartitle">
			<image class="back_img" src="../../static/img/lefts.png" mode="" @click="addblack()"></image>
			<view style="font-size: 36rpx;">职场话题</view>
				<image class="editimg" src="../../static/img/zier@@dfe.png" @tap="navJump()" ></image>
		</view>
		<view class="toggletabbar">
			<view :class="topindex==1?'activetoggle':''" @click="topicnet(1)">全部话题</view>
			<view :class="topindex==2?'activetoggle':''" @click="topicnet(2)">热门话题</view>
		</view>
		<view class="contentlist">
			<view class="contentitem" v-for="(item,index) in talkList" :key="index">
				<view class="titlebox" @click="gototopic(item.id)">
					<image class="avatarimg" :src="picture.getImgUrl(item.user.avatar)" mode=""></image>
					<view class="titlebox_right">
						<view class="nickname">{{item.user.nickname}}</view>
						<view class="timescreen">{{item.createtime}}</view>
					</view>
				</view>
				<view class="contentbox">{{item.info}}</view>
				<view class="bottombox">
					<view class="itembottom">
						<image class="iconcomment" src="../../static/img/info.png" mode=""></image>{{item.cmt_nums}}
					</view>
					<view class="itembottom">
						<image class="iconcomment" src="../../static/img/goods.png" mode=""></image>{{item.is_zan}}
					</view>
					<view class="itembottom">
						<image class="iconcomment" src="../../static/img/look.png" mode=""></image>{{item.read_nums}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		talkindex
	} from '../../api/advisory.js'
	export default {
		data() {
			return {
				topindex: 1,
				//获取话题列表
				talkList: []
			}
		},
		onLoad() {
			this.gototalk(1)
		},
		methods: {
			//选项卡切换
			topicnet(id) {
				this.topindex = id,
				this.gototalk(id)
			},
			//返回上一页
			addblack() {
				uni.navigateBack()
			},
			//获取话题
			gototalk(index){
				talkindex(index).then((res) => {
					this.talkList = res.data
				})
			},
			//页面跳转到发布话题
			navJump(){
				uni.navigateTo({
					url:"../issue/issue"
				})
			},
			gototopic(id){
				uni.navigateTo({
					url:`topicdetail?id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.newbie {
		height: 100%;
		width: 100%;
		background-color: #f5f5f5;

		.tabbartitle {
			background-color: #fff;
			height: 70rpx;
			width: 100%;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back_img {
				width: 20rpx;
				height: 36rpx;
			}

			.editimg {
				height: 36rpx;
				width: 36rpx;
			}
		}

		.toggletabbar {
			height: 70rpx;
			width: 100%;
			padding: 0 30rpx;
			background-color: #fff;
			display: flex;
		 align-items: center;
			justify-content: space-around;

			.activetoggle {
				position: relative;
			}

			.activetoggle::after {
				content: "";
				display: block;
			 position: absolute;
				bottom: -10rpx;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background: #ffdd47;
				border-radius: 2rpx;
			}
		}

		.contentlist {
			width: 100%;
			height: auto;

			.contentitem {
				margin-top: 20rpx;
				height: auto;
				width: 100%;
				padding: 30rpx 50rpx 20rpx;
				background-color: #fff;

				.titlebox {
					display: flex;
					justify-content: flex-start;
					width: 100%;
					height: auto;

					.avatarimg {
						height: 70rpx;
						width: 70rpx;
						border-radius: 50%;
					}

					.titlebox_right {
						margin-left: 20rpx;
						height: 70rpx;
						width: auto;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.nickname {
						    height: 30rpx;
						    font-size: 30rpx;
						    line-height: 30rpx;
						    width: 300rpx;
						}
						.timescreen {
						    height: 30rpx;
						    line-height: 30rpx;
						    width: 300rpx;
						    font-size: 24rpx;
						    font-family: PingFang SC;
						    font-weight: 500;
						    color: #999;
						}
					}
				}

				.contentbox {
					height: auto;
					width: 100%;
					line-height: 50rpx;
					padding: 10rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.bottombox {
					width: 100%;
					height: 50rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.itembottom {
						width: 200rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.iconcomment {
							width: 28rpx;
							height: 26rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
